import React, { Component } from 'react'
import { NavBar, Icon, Tabs, Toast } from "antd-mobile"
import SearchInput from "../searchInput/SearchInput"
import "./GoodList.css"

import axios from "axios"
import saber from "../../assets/images/saber.jpg"
export default class GoodList extends Component {
    constructor(props) {
        super(props)
        this.goodListRef = React.createRef()
        this.pagesize = 20
        this.pagenum = 1
    }
    state = {
        tabs: [
            { title: "综合🐱‍💻" },
            { title: "销量🐱‍👓" },
            { title: "价格🐱‍👤" },
        ],
        goods: [],

    }
    componentDidMount() {

        let search = this.props.location.search
        let params = search.split("?")[1] || "[]"
        let params_arr = params.split("=")
        if (params_arr[0] === "cid") {
            this.cid = params_arr[1]
        } else if (params_arr[0] === "query") {
            this.query = params_arr[0]
        }
        this.getProductList()
        this.goodListRef.current.parentElement.addEventListener("scroll", this.handleScroll)
    }
    componentWillUnmount() {
        this.goodListRef.current.parentElement.addEventListener.removeEventListener("scroll", this.handleScroll)
    }
    handleScroll = (params) => {
        let parentElement = this.goodListRef.current.parentElement
        let clientHeight = parentElement.clientHeight
        let scrollHeight = parentElement.scrollHeight
        let scrollTop = parentElement.scrollTop
        console.log(scrollHeight - clientHeight - scrollTop)
        if (scrollHeight - clientHeight - scrollTop <= 1) {
            console.log("触底了")
            this.getProductList()
        }
    }
    getProductList = () => {
        // match.params
        let params = {}
        if (this.cid) {
            params['cid'] = this.cid
        }
        if (this.query) {
            params['query'] = decodeURIComponent(this.query)
        }

        if (this.total) {
            params["pagenum"] = ++this.pagenum
        } else {
            params["pagenum"] = this.pagenum
        }

        // console.log(this.props)
        if (this.pagenum && this.pagenum + 1 > Math.ceil(this.total / this.pagesize)) {
            Toast.info("没有了", 1)
        } else {
            axios.get("https://www.linweiqin.cn/api/public/v1/goods/search", {
                params: params
            }).then(res => {
                this.total = res.data.message.total
                this.pagenum = res.data.message.pagenum
                this.setState({
                    goods: [...this.state.goods, ...res.data.message.goods]
                })
            })
        }

    }
    handleItemClick = (goods_id) => {
        this.props.history.push('/goodDetail/' + goods_id)
    }

    render() {
        return (
            <div className="yg-gl-nav">
                <div className="yg-gl-nav">
                    <NavBar className="gl-nav"
                        icon={<Icon type="left" />}
                        onLeftClick={() => window.history.go(-1)}>
                        商品分类
                </NavBar>
                </div>
                {/* 搜索框 */}
                <div className="yg-gl-search">
                    <SearchInput></SearchInput>
                </div>

                <div className="yg-gl-tab">
                    <Tabs tabs={this.state.tabs}
                        initialPage={1}
                        onChange={(tab, index) => { console.log('onChange', index, tab); }}
                        onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
                        tabBarUnderlineStyle={{ borderColor: "red" }}
                        tabBarActiveTextColor={"#000"}
                    >
                        <div className="gl-tab-zh" ref={this.goodListRef}>
                            {this.state.goods.map((v, i) => {
                                return <div className="tab-zh-item" key={v.goods_id} onClick={this.handleItemClick.bind(this, v.goods_id)}>
                                    <div className="zh-item-left">
                                        <img src={v.goods_small_logo ? v.goods_small_logo : saber} />
                                    </div>
                                    <div className="zh-item-right">
                                        <div className="item-right-top">
                                            {v.goods_name}
                                        </div>
                                        <div className="item-right-bottom">
                                            ￥{v.goods_price}
                                        </div>
                                    </div>
                                </div>
                            })}
                        </div>
                        <div style={{
                            height: '150px',
                            backgroundColor: '#fff'
                        }}>
                            销量🐱‍👓🐱‍👓🐱‍👓🐱‍👓🐱‍👓🐱‍👓
                        </div>
                        <div style={{
                            height: '150px',
                            backgroundColor: '#fff'
                        }}>
                            价格🐱‍👤🐱‍👤🐱‍👤🐱‍👤🐱‍👤🐱‍👤
                        </div>
                    </Tabs>
                </div>
            </div>
        )
    }
}
